<!DOCTYPE html>



  


<html class="theme-next mist use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">



  
  
    
    
  <script src="/lib/pace/pace.min.js?v=1.0.2"></script>
  <link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet">







<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon.ico?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.ico?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.ico?v=5.1.4">


  <link rel="mask-icon" href="/images/facicon.ico?v=5.1.4" color="#222">





  <meta name="keywords" content="JavaScript,">





  <link rel="alternate" href="/atom.xml" title="Key" type="application/atom+xml">






<meta name="description" content="JavaScript声明提升JavaScript数值转换javascript操作符及控制语句javascript函数传参javascript函数操作符javascript数组的应用javascript原生DOM操作javascript原生事件操作 声明提升变量声明提升变量声明提升:变量的定义在执行时会被提升到当前作用域的顶部，但是赋值的操作位置不变. 实例: 1234567891011121314">
<meta name="keywords" content="JavaScript">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript基础进阶">
<meta property="og:url" content="https://blog.qipo.net/2017/09/12/JAVAScript-2/index.html">
<meta property="og:site_name" content="Key">
<meta property="og:description" content="JavaScript声明提升JavaScript数值转换javascript操作符及控制语句javascript函数传参javascript函数操作符javascript数组的应用javascript原生DOM操作javascript原生事件操作 声明提升变量声明提升变量声明提升:变量的定义在执行时会被提升到当前作用域的顶部，但是赋值的操作位置不变. 实例: 1234567891011121314">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://assets.qipo.net/dom.png">
<meta property="og:image" content="http://assets.qipo.net/dom.jpg">
<meta property="og:updated_time" content="2020-06-04T08:30:16.904Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="JavaScript基础进阶">
<meta name="twitter:description" content="JavaScript声明提升JavaScript数值转换javascript操作符及控制语句javascript函数传参javascript函数操作符javascript数组的应用javascript原生DOM操作javascript原生事件操作 声明提升变量声明提升变量声明提升:变量的定义在执行时会被提升到当前作用域的顶部，但是赋值的操作位置不变. 实例: 1234567891011121314">
<meta name="twitter:image" content="http://assets.qipo.net/dom.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Mist',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://blog.qipo.net/2017/09/12/JAVAScript-2/">





  <title>JavaScript基础进阶 | Key</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Key</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description"></h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br>
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br>
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://blog.qipo.net/2017/09/12/JAVAScript-2/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Key">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Key">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">JavaScript基础进阶</h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-09-12T08:16:54+08:00">
                2017-09-12
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/JavaScript/" itemprop="url" rel="index">
                    <span itemprop="name">JavaScript</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  11.5k
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  49
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>JavaScript声明提升<br>JavaScript数值转换<br>javascript操作符及控制语句<br>javascript函数传参<br>javascript函数操作符<br>javascript数组的应用<br>javascript原生DOM操作<br>javascript原生事件操作</p>
<h2 id="声明提升"><a href="#声明提升" class="headerlink" title="声明提升"></a>声明提升</h2><h3 id="变量声明提升"><a href="#变量声明提升" class="headerlink" title="变量声明提升"></a>变量声明提升</h3><p>变量声明提升:变量的定义在执行时会被提升到当前作用域的顶部，但是赋值的操作位置不变.</p>
<p>实例:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>javascript<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(f);<span class="comment">//undefined</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> f = <span class="number">100</span>;</span></span><br><span class="line"><span class="undefined">    /*</span></span><br><span class="line"><span class="undefined">    变量声明提升:变量的定义在执行时会被提升到当前作用域的顶部，但是赋值的操作位置不变</span></span><br><span class="line"><span class="undefined">    */</span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="函数声明提升"><a href="#函数声明提升" class="headerlink" title="函数声明提升"></a>函数声明提升</h3><p>函数声明提升：会将函数的声明提升到当前作用域的顶部.    </p>
<p>实例:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>作用域<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    fun();<span class="comment">//100</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 函数声明提升：会将函数的声明提升到当前作用域的顶部</span></span></span><br><span class="line"><span class="actionscript">    <span class="function"><span class="keyword">function</span> <span class="title">fun</span><span class="params">()</span></span>&#123;</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> f = <span class="number">100</span>;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(f);</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="经典面试题"><a href="#经典面试题" class="headerlink" title="经典面试题"></a>经典面试题</h3><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>提升<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> a = <span class="number">10</span>;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="function"><span class="keyword">function</span> <span class="title">fun</span><span class="params">()</span></span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(a);<span class="comment">//undefined</span></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> a = <span class="number">100</span>;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="comment">/*等价代码*/</span></span></span><br><span class="line"><span class="undefined">      /*</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> a;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(a);<span class="comment">//undefined</span></span></span><br><span class="line"><span class="undefined">      a = 100;</span></span><br><span class="line"><span class="undefined">      */</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    fun();<span class="comment">//</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>这个题,局部可以调用全局变量,所以应该会显示10.这是错的.不要忘了后面还有个<code>var a = 100;</code>,变量声明提升,所以<code>var a;</code>被提升到了局部的最顶部,所以全局变量a在局部被局部变量a覆盖了,由于变量声明提升,只有声明,没有赋值,所以这里的a为<code>undefined</code>.</p>
<h2 id="数值转换"><a href="#数值转换" class="headerlink" title="数值转换"></a>数值转换</h2><p>有3个函数可以把非数值转换为数值:<code>Number()</code>,<code>parseInt()</code>和<code>parseFloat()</code>.   </p>
<h3 id="Number"><a href="#Number" class="headerlink" title="Number()"></a>Number()</h3><p><code>Number()</code>可以用于任何数据类型,若该类型不能被装换为数字,则返回<code>NaN</code>.<br>实例:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num1 = <span class="built_in">Number</span>(<span class="string">"Hello world!"</span>); <span class="comment">//NaN</span></span><br><span class="line"><span class="keyword">var</span> num2 = <span class="built_in">Number</span>(<span class="string">""</span>);<span class="comment">//0</span></span><br><span class="line"><span class="keyword">var</span> num3 = <span class="built_in">Number</span>(<span class="string">"000011"</span>);<span class="comment">//11</span></span><br><span class="line"><span class="keyword">var</span> num4 = <span class="built_in">Number</span>(<span class="literal">true</span>);<span class="comment">//1</span></span><br><span class="line"><span class="keyword">var</span> num5 = <span class="built_in">Number</span>(<span class="literal">false</span>);<span class="comment">//0</span></span><br><span class="line"><span class="keyword">var</span> num6 = <span class="built_in">Number</span>(<span class="string">"123hello"</span>);<span class="comment">//NaN</span></span><br><span class="line"><span class="keyword">var</span> num7 = <span class="built_in">Number</span>(<span class="string">"0x12"</span>);<span class="comment">//10</span></span><br></pre></td></tr></table></figure>
<h3 id="parseInt"><a href="#parseInt" class="headerlink" title="parseInt()"></a>parseInt()</h3><p><code>parseInt()</code>函数在转换字符串时,更多的是看其是否符合数值模式.它会忽略字符串前面的空格,直到找到第一个非空格字符.如果第一个字符不是数字字符或者负号,<code>parseInt()</code>就会返回<code>NaN</code>;也就是说,用<code>parseInt()</code>转换空字符串会返回<code>NaN</code>(<code>Number()</code>对空字符串返回的是0).<br>如果第一个字符是数字字符,<code>parseInt()</code>会继续解析第二个字符,直到解析完所有后续字符或者遇到了一个非数字字符.<br>例如:<code>123hello</code>会被转换为<code>123</code>,因为<code>hello</code>会被完全忽略.类似的,<code>22.5</code>会被转换为<code>22</code>,因为小数点并不是有效的数字字符.  </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="string">""</span>));<span class="comment">//NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="string">"1234abc"</span>));<span class="comment">//1234</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="string">"abc"</span>));<span class="comment">//NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="string">"10.123"</span>));<span class="comment">//10</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="string">"0x12"</span>));<span class="comment">//18</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="string">"070"</span>));<span class="comment">//70, 并没有解析为８进制</span></span><br></pre></td></tr></table></figure>
<p>为了消除在使用<code>parseInt()</code>函数时可能导致的进制转换问题,可以为这个函数提供第二个参数,转换时使用的基数(即多少进制).也就是说这个只能由别的进制转换为10进制,而不能将10进制转换为其他的进制.</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="string">"010"</span>, <span class="number">8</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="string">"10"</span>, <span class="number">2</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="string">"20"</span>,<span class="number">2</span>));<span class="comment">//超过范围时，转换为NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="string">"10"</span>, <span class="number">10</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="string">"10"</span>, <span class="number">16</span>));</span><br></pre></td></tr></table></figure>
<h3 id="parseFloat"><a href="#parseFloat" class="headerlink" title="parseFloat()"></a>parseFloat()</h3><p><code>parseFloat()</code>函数也是从第一个字符开始的(位置0)开始解析每个字符,都按照十进制解析.而且也是一直解析到字符串的末尾,或者解析遇见一个无效的浮点数字字符为止.<br>也就是说,字符串中的第一个小数点是有效的,而第二个小数点就是无效的了,因此他后面的字符串将被忽略.</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">"----parseFloat---------"</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseFloat</span>(<span class="string">"10.234"</span>)); <span class="comment">//10.234</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseFloat</span>(<span class="string">"10.abc"</span>));<span class="comment">//10</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseFloat</span>(<span class="string">"10.23.4"</span>));<span class="comment">//10.23</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseFloat</span>(<span class="string">"0x10.234"</span>));<span class="comment">//0</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseFloat</span>(<span class="string">"010.234"</span>));<span class="comment">//10.234</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseFloat</span>(<span class="string">"abc"</span>));<span class="comment">//NaN</span></span><br></pre></td></tr></table></figure>
<h2 id="操作符以及控制语句"><a href="#操作符以及控制语句" class="headerlink" title="操作符以及控制语句"></a>操作符以及控制语句</h2><h3 id="break和continue"><a href="#break和continue" class="headerlink" title="break和continue"></a>break和continue</h3><p><code>break</code>和<code>continue</code>语句用于在循环中精确的控制代码的执行.其中,<code>break</code>语句会立即退出循环,强制继续执行循环后面的语句.而<code>continue</code>语句虽然也是立即退出循环,但退出循环后会从循环的顶部继续执行.</p>
<blockquote>
<p><code>break</code>只会跳出一层循环.<code>continue</code>后面的的语句不会执行.</p>
</blockquote>
<figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++)&#123;</span><br><span class="line">    <span class="keyword">if</span> (i == <span class="number">5</span>)&#123;</span><br><span class="line">       <span class="keyword">break</span>;</span><br><span class="line">     &#125;</span><br><span class="line">    alert(i);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">5</span>; i++)&#123;</span><br><span class="line">    <span class="keyword">if</span> (i &lt; <span class="number">5</span>)&#123;</span><br><span class="line">      <span class="keyword">continue</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    alert(i);</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<p>如果是多层循环,你想用<code>break</code>跳出所有的循环,就必须用到<code>label</code>语句,使用<code>label</code>语句可以在代码中添加标签,以便将来使用.</p>
<p>实例:</p>
<figure class="highlight stata"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">out</span>: <span class="keyword">for</span> (<span class="keyword">var</span> j = 0; j &lt; 10; j++) &#123;</span><br><span class="line"></span><br><span class="line">    console.<span class="built_in">log</span>(<span class="string">"j = "</span> + j);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = 0; i &lt; 10; i++) &#123;</span><br><span class="line">      console.<span class="built_in">log</span>(<span class="string">"i = "</span> + i);</span><br><span class="line">      <span class="keyword">if</span> (i == 5) &#123;</span><br><span class="line">        <span class="comment">//跳出当前循环，继续运行循环后边的代码</span></span><br><span class="line">        <span class="comment">// break;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">//跳出指定循环，继续运行循环后边的代码</span></span><br><span class="line">        <span class="keyword">break</span> <span class="keyword">out</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<p>在这里<code>break</code>跳出的就不仅仅是一层循环了,而是跳出了<code>label</code>语句标记的循环.</p>
<h3 id="switch语句"><a href="#switch语句" class="headerlink" title="switch语句"></a>switch语句</h3><p><code>switch</code>语句与if语句的关系最为密切,而且也是在其他语言中普遍使用的一种流控制语句.<br><code>switch</code>语句中使用任何数据类型(在很多其他语言中只能使用数值),无论是字符串,还是对象都没有问题.其次,每个<code>case</code>的值不一定是常量,可以是变量,甚至可以是表达式.      </p>
<figure class="highlight ceylon"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">switch</span>(expression) &#123;</span><br><span class="line">  <span class="keyword">case</span> <span class="keyword">value</span><span class="number">1</span>:</span><br><span class="line">       statement</span><br><span class="line">       <span class="keyword">break</span>;</span><br><span class="line">   <span class="keyword">case</span> <span class="keyword">value</span><span class="number">2</span>:</span><br><span class="line">       statement</span><br><span class="line">       <span class="keyword">break</span>;</span><br><span class="line">   <span class="keyword">default</span>:</span><br><span class="line">       statement</span><br><span class="line">       <span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>注意要使用关键字<code>break</code>,否则会导致执行多个<code>case</code>语句.不过有些特殊情况也需要忽略<code>break</code>以实现某个目标.<br>没有<code>break</code>会导致,匹配到一个<code>case</code>,他后面的<code>case</code>也会依次执行.</p>
</blockquote>
<p>实例:是一个输入日期,求该该天是今年的第多少天?</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> year = <span class="number">2017</span>, mon = <span class="number">10</span>, day = <span class="number">10</span>;</span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> leap = <span class="number">0</span>, sum = <span class="number">0</span>;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">if</span> ((year % <span class="number">400</span> == <span class="number">0</span>) || ((year % <span class="number">4</span> == <span class="number">0</span>) &amp;&amp; (year % <span class="number">100</span> != <span class="number">0</span>)))&#123;</span></span><br><span class="line"><span class="undefined">      leap = 1;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">switch</span> (mon)&#123;</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">case</span>  <span class="number">12</span>:</span></span><br><span class="line"><span class="undefined">      sum += 30;</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">case</span>  <span class="number">11</span>:</span></span><br><span class="line"><span class="undefined">      sum += 31;</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">case</span>  <span class="number">10</span>:</span></span><br><span class="line"><span class="undefined">      sum += 30;</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">case</span>  <span class="number">9</span>:</span></span><br><span class="line"><span class="undefined">      sum += 31;</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">case</span>  <span class="number">8</span>:</span></span><br><span class="line"><span class="undefined">      sum += 31;</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">case</span>  <span class="number">7</span>:</span></span><br><span class="line"><span class="undefined">      sum += 30;</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">case</span>  <span class="number">6</span>:</span></span><br><span class="line"><span class="undefined">      sum += 31;</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">case</span>  <span class="number">5</span>:</span></span><br><span class="line"><span class="undefined">      sum += 30;</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">case</span>  <span class="number">4</span>:</span></span><br><span class="line"><span class="undefined">      sum += 31;</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">case</span>  <span class="number">3</span>:</span></span><br><span class="line"><span class="undefined">      sum += 28 + leap;</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">case</span>  <span class="number">2</span>:</span></span><br><span class="line"><span class="undefined">      sum += 31;</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">case</span>  <span class="number">1</span>:</span></span><br><span class="line"><span class="undefined">      sum += day;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(sum);</span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="JAVAScript函数"><a href="#JAVAScript函数" class="headerlink" title="JAVAScript函数"></a>JAVAScript函数</h3><p>函数对于任何编程语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.</p>
<figure class="highlight ada"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">javascript函数示例:</span><br><span class="line"><span class="keyword">function</span> <span class="title">sum</span>(arg1,arg2)&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="type">arg1</span> + arg2;</span><br><span class="line">&#125;</span><br><span class="line">sum(<span class="number">1</span>,<span class="number">2</span>)</span><br></pre></td></tr></table></figure>
<p>在上面的代码中,其中<code>arg1</code>,<code>arg2</code>为传递的形参,<code>sum(1,2)</code>中的数值为实参.</p>
<h4 id="arguments对象"><a href="#arguments对象" class="headerlink" title="arguments对象"></a>arguments对象</h4><p><code>arguments</code>是存储了函数传递过来的实参的,并且arguments对象只有函数开始时才可用.<code>arguments</code>对象只是与数组类似(它并不是ARRAY的实例),因为可以使用方括号语法访问它的每一个元素(即第一个元素是<code>arguments[0]</code>,第二个元素是<code>arguments[1]</code>,依次类推),使用<code>length</code>属性来确定传递进来多少个参数.     </p>
<p>实例:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>函数传递参数<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript"><span class="comment">//参数个数随意</span></span></span><br><span class="line"><span class="actionscript">     <span class="comment">//arguments 是一个伪数组</span></span></span><br><span class="line"><span class="actionscript">     <span class="function"><span class="keyword">function</span> <span class="title">sum</span><span class="params">(arg)</span></span>&#123;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="comment">//arguments只能在函数内部使用！！！！！</span></span></span><br><span class="line"><span class="actionscript">      <span class="comment">//arguments 用于获得实参</span></span></span><br><span class="line"><span class="javascript">       <span class="built_in">console</span>.log(<span class="built_in">arguments</span>);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">       <span class="keyword">var</span> result = <span class="number">0</span>;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">       <span class="comment">//arguments.length是参数的个数</span></span></span><br><span class="line"><span class="javascript">       <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="built_in">arguments</span>.length; i++) &#123;</span></span><br><span class="line"><span class="actionscript">         <span class="comment">//arguments[i], 就指定参数</span></span></span><br><span class="line"><span class="javascript">         result += <span class="built_in">arguments</span>[i];</span></span><br><span class="line"><span class="undefined">       &#125;</span></span><br><span class="line"><span class="javascript">       <span class="built_in">console</span>.log(result);</span></span><br><span class="line"><span class="undefined">     &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">     <span class="built_in">console</span>.log(sum.length);<span class="comment">//1</span></span></span><br><span class="line"><span class="actionscript">     <span class="comment">//该函数的形式参数个数！！！！！！</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">     sum();</span></span><br><span class="line"><span class="undefined">     sum(1);</span></span><br><span class="line"><span class="undefined">     sum(1,2);</span></span><br><span class="line"><span class="undefined">     sum(1,2,3);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">         </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">       <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="函数返回值"><a href="#函数返回值" class="headerlink" title="函数返回值"></a>函数返回值</h4><p>函数调用一次之后表示运算完毕,使用return关键字可以返回结果,同样return可以提前结束函数的运行.</p>
<figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">function <span class="function"><span class="title">fun</span><span class="params">(arg1,arg2)</span></span>&#123;</span><br><span class="line">  <span class="keyword">return</span> arg1 + arg2;</span><br><span class="line">  console.log(<span class="string">"after return ..."</span>);<span class="comment">//不会执行</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="title">fun</span><span class="params">()</span></span>;<span class="comment">//返回计算结果</span></span><br><span class="line"></span><br><span class="line">function fun1(arg1)&#123;</span><br><span class="line">  console.log(arg1);</span><br><span class="line">  <span class="keyword">return</span>;<span class="comment">//返回undefined</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="布尔操作符"><a href="#布尔操作符" class="headerlink" title="布尔操作符"></a>布尔操作符</h3><p>布尔操作符一共有3个:与,非,或.</p>
<h4 id="逻辑非"><a href="#逻辑非" class="headerlink" title="逻辑非(!)"></a>逻辑非(!)</h4><figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">alert</span>(!false); <span class="comment">//true</span></span><br><span class="line"><span class="selector-tag">alert</span>(!<span class="string">"blue"</span>);<span class="comment">//false</span></span><br><span class="line"><span class="selector-tag">alert</span>(!<span class="number">0</span>);<span class="comment">//true</span></span><br><span class="line"><span class="selector-tag">alert</span>(!NaN);<span class="comment">//true</span></span><br><span class="line"><span class="selector-tag">alert</span>(!<span class="string">""</span>);<span class="comment">//true</span></span><br><span class="line"><span class="selector-tag">alert</span>(!<span class="number">12345</span>);<span class="comment">//false</span></span><br></pre></td></tr></table></figure>
<h4 id="逻辑与-amp-amp"><a href="#逻辑与-amp-amp" class="headerlink" title="逻辑与(&amp;&amp;)"></a>逻辑与(&amp;&amp;)</h4><p>操作符由两个和号(&amp;&amp;)表示,至少有两个操作数.<br>逻辑与的特点：短路<br>短路：与运算从左向右执行，一旦遇到一个为假的,那么后边的不再执行      </p>
<figure class="highlight 1c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">console.<span class="built_in">log</span>(<span class="number">10</span> <span class="meta">&amp;&amp; 0);<span class="comment">//0</span></span></span><br><span class="line">console.<span class="built_in">log</span>(<span class="number">0</span> <span class="meta">&amp;&amp; 10);<span class="comment">//0</span></span></span><br><span class="line">console.<span class="built_in">log</span>(<span class="number">10</span> <span class="meta">&amp;&amp; 20);<span class="comment">//20</span></span></span><br><span class="line">console.<span class="built_in">log</span>(<span class="number">10</span> <span class="meta">&amp;&amp; true);<span class="comment">//true</span></span></span><br><span class="line">console.<span class="built_in">log</span>(<span class="number">10</span> <span class="meta">&amp;&amp; false);<span class="comment">//false</span></span></span><br><span class="line"></span><br><span class="line">var d = <span class="number">10</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//d++本身是一个表达式，只不过该表达式的值等于 没有自增1之前的值。</span></span><br><span class="line"><span class="comment">//++d本身也是一个表达式,只不过该表达式的值等于自增1以后的值.</span></span><br><span class="line">console.<span class="built_in">log</span>(<span class="number">10</span> <span class="meta">&amp;&amp; 20 &amp;&amp; 30 &amp;&amp; d++);<span class="comment">//10</span></span></span><br><span class="line">console.<span class="built_in">log</span>(d);<span class="comment">//11</span></span><br></pre></td></tr></table></figure>
<h4 id="逻辑或"><a href="#逻辑或" class="headerlink" title="逻辑或(||)"></a>逻辑或(||)</h4><p>操作符由两个竖线符号(||)表示,至少有两个操作数.<br>它的特点和逻辑与类似,也是短路,不过他是从左向右执行,一旦遇到一个为真,那么后面的不在执行.   </p>
<figure class="highlight ruby"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">console.log(<span class="number">10</span> <span class="params">||</span> <span class="literal">false</span>);<span class="regexp">//</span><span class="number">10</span></span><br><span class="line">console.log(<span class="literal">false</span> <span class="params">||</span> <span class="number">10</span> <span class="params">||</span> <span class="number">20</span> );<span class="regexp">//</span><span class="number">10</span></span><br></pre></td></tr></table></figure>
<h3 id="关系操作符"><a href="#关系操作符" class="headerlink" title="关系操作符"></a>关系操作符</h3><p>小于(&lt;),大于(&gt;),小于等于(&lt;=),和大于等于(&gt;=),相等(==)，不等(!=)，全等(===)，不全等(!==)操作符.</p>
<ol>
<li>如果两个操作数都是数值,则执行数值比较.</li>
<li>如果两个操作数都是字符串,则比较两个字符对应的字符编码值.</li>
<li>如果一个操作数是数值,则将另一个操作数转换为一个数值,然后执行数值比较.</li>
<li>如果一个操作数是对象,则调用这个对象的<code>valueOf()</code>方法,用得到的结果按照前面的规则执行比较.如果对象没有<code>valueOf()</code>方法,则调用<code>toString()</code>方法,并用得到的结果根据前面的规则执行比较.</li>
<li>如果一个操作数是布尔值,则现将其转换为数值,然后再执行比较.</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> &gt; <span class="number">20</span>);<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> &lt; <span class="number">20</span>);<span class="comment">//true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> &lt; <span class="string">"23"</span>);<span class="comment">//true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">"23"</span> &gt; <span class="string">"233"</span>);<span class="comment">//false,按照编码的大小去比较,它是挨个字符去比较.</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> &gt; <span class="literal">NaN</span>);<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> &lt; <span class="literal">NaN</span>);<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> == <span class="literal">NaN</span>);<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">NaN</span> == <span class="literal">NaN</span>);<span class="comment">//false</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">==  相等, 是先转换再比较</span></span><br><span class="line"><span class="comment">=== 全等, 是仅比较而不转换</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> == <span class="string">"10"</span>);<span class="comment">//true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> === <span class="string">"10"</span>);<span class="comment">//false</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> != <span class="string">"10"</span>);<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> !== <span class="string">"10"</span>);<span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<h3 id="三目运算符"><a href="#三目运算符" class="headerlink" title="三目运算符"></a>三目运算符</h3><p><code>var result = 表达式１? 表达式2: 表达式3;</code><br>如果表达式１的值为true, 那么表达式2的值会赋值给result;否则，表达式3的值会赋值给result.</p>
<figure class="highlight nimrod"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">// 如果表达式１的值为<span class="literal">true</span>, 那么表达式<span class="number">2</span>的值会赋值给<span class="literal">result</span>;否则，表达式<span class="number">3</span>的值会赋值给<span class="literal">result</span></span><br><span class="line">    <span class="keyword">var</span> <span class="literal">result</span> = <span class="number">10</span> &gt; <span class="number">20</span> ?  'hello' : 'world';</span><br><span class="line">    console.log(<span class="literal">result</span>);//world</span><br><span class="line"></span><br><span class="line">    /*</span><br><span class="line">    <span class="keyword">if</span> (<span class="number">10</span>&gt;<span class="number">20</span>)&#123;</span><br><span class="line">    <span class="literal">result</span> = 'hello';</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="literal">result</span> = 'world';</span><br><span class="line">    &#125;</span><br><span class="line">    */</span><br></pre></td></tr></table></figure>
<h3 id="复合操作符"><a href="#复合操作符" class="headerlink" title="复合操作符"></a>复合操作符</h3><p>复合操作符用于简化操作符,提升性能.</p>
<figure class="highlight lsl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//复合运算符</span></span><br><span class="line">var a = <span class="number">10</span>, b = <span class="number">20</span>;</span><br><span class="line">a += b; <span class="comment">// a = a + b;</span></span><br><span class="line">a -= b; <span class="comment">// a = a - b;</span></span><br><span class="line">a *= b; <span class="comment">// a = a * b;</span></span><br><span class="line">a /= b; <span class="comment">// a = a / b;</span></span><br><span class="line">a %= b; <span class="comment">// a = a % b;</span></span><br></pre></td></tr></table></figure>
<h3 id="逗号操作符"><a href="#逗号操作符" class="headerlink" title="逗号操作符"></a>逗号操作符</h3><p>使用逗号操作符可以在一条语句中执行多个操作,如下所示:<br><code>var num = 1, num1 = 2;</code>      </p>
<p>逗号操作符还可以用于赋值.在用于赋值时,逗号操作符总会返回表达式中的最后一项,比如:<br><code>var result = (表达式1,表达式2,表达式3);</code><br>result的值为表达式3的值.逗号运算符取最后一个的结果为整个表达式的结果,但是前边所有的表达式都会运算.</p>
<h2 id="JAVAScript数组"><a href="#JAVAScript数组" class="headerlink" title="JAVAScript数组"></a>JAVAScript数组</h2><p>数组是值的有序集合,每个值就是一个元素,每个元素在数组中有一个位置,以数字表示,成为索引.JAVAScript数组是无类型,数组元素可以是任意类型,并且同一个数组中的不同元素也可能是不同的类型.</p>
<figure class="highlight stata"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span>  <span class="keyword">one</span> = [];</span><br><span class="line">console.<span class="built_in">log</span>(<span class="keyword">typeof</span> <span class="keyword">one</span>);<span class="comment">//object</span></span><br></pre></td></tr></table></figure>
<h3 id="创建数组"><a href="#创建数组" class="headerlink" title="创建数组"></a>创建数组</h3><p>使用数组直接量进行创建,方括号中使用逗号隔开:</p>
<figure class="highlight lsl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var a = [];</span><br><span class="line">var b = [<span class="number">10</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line">var c = [<span class="number">1.1</span>,true,'a'];</span><br><span class="line">var d = [<span class="number">1</span>,<span class="number">2</span>,,<span class="number">3</span>];  <span class="comment">//其中省略的元素值为undefined,稀疏数组</span></span><br></pre></td></tr></table></figure>
<p>使用Array()创建:</p>
<figure class="highlight haxe"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="keyword">new</span> <span class="type">Array</span>();<span class="comment">//创建空数组</span></span><br><span class="line"><span class="keyword">var</span> b = <span class="keyword">new</span> <span class="type">Array</span>(<span class="number">10</span>);<span class="comment">//创建长度为10的元素</span></span><br><span class="line"><span class="keyword">var</span> c = <span class="keyword">new</span> <span class="type">Array</span>(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>);<span class="comment">//创建一个已经包含三个元素的数组</span></span><br></pre></td></tr></table></figure>
<h3 id="数组的读写操作"><a href="#数组的读写操作" class="headerlink" title="数组的读写操作:"></a>数组的读写操作:</h3><figure class="highlight mipsasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var a = [<span class="string">"hello"</span>]<span class="comment">;</span></span><br><span class="line">var <span class="keyword">b </span>= a[<span class="number">0</span>]<span class="comment">;</span></span><br><span class="line">a[<span class="number">1</span>] = <span class="string">"world"</span><span class="comment">;</span></span><br><span class="line">i = <span class="number">1</span><span class="comment">;</span></span><br><span class="line">a[i + <span class="number">2</span>] = <span class="string">"string"</span><span class="comment">;</span></span><br></pre></td></tr></table></figure>
<h3 id="数组的长度"><a href="#数组的长度" class="headerlink" title="数组的长度:"></a>数组的长度:</h3><figure class="highlight lsl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>];</span><br><span class="line">console.log(a.length); <span class="comment">//长度为４</span></span><br><span class="line"></span><br><span class="line">a[<span class="number">999</span>] = <span class="number">999</span>; <span class="comment">//长度为　1000, 稀疏数组的长度大于元素的个数</span></span><br><span class="line">console.log(a.length);<span class="comment">// 长度为1000</span></span><br></pre></td></tr></table></figure>
<h3 id="数组的遍历"><a href="#数组的遍历" class="headerlink" title="数组的遍历"></a>数组的遍历</h3><p>使用for循环是最常见的遍历数组的方式:</p>
<figure class="highlight lsl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">var a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>];</span><br><span class="line">for(var i = <span class="number">0</span>; i &lt; a.length; i++)&#123;</span><br><span class="line">  console.log(a[i]);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//这里还是可以提高效率的!如下:</span></span><br><span class="line">for(var i = <span class="number">0</span>, len = a.length; i &lt; len; i++)&#123;<span class="comment">//这里把长度赋值,不用每次去调用这个方法.</span></span><br><span class="line">  console.log(a[i]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>更简单的方式:</p>
<figure class="highlight delphi"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i <span class="keyword">in</span> a)<span class="comment">&#123;</span></span><br><span class="line"><span class="comment">  console.log(a[i]);</span></span><br><span class="line"><span class="comment">&#125;</span></span><br></pre></td></tr></table></figure>
<p>使用一个方法<code>forEach()</code>也是可以遍历的,后面会说到.</p>
<h2 id="数组常用的方法"><a href="#数组常用的方法" class="headerlink" title="数组常用的方法"></a>数组常用的方法</h2><h3 id="数组元素的添加和删除"><a href="#数组元素的添加和删除" class="headerlink" title="数组元素的添加和删除"></a>数组元素的添加和删除</h3><p>添加:</p>
<ul>
<li>直接对新索引值进行赋值(不是一个方法).</li>
<li><code>push()</code>使用<code>push()</code>方法在数组末尾添加一个或者多个元素.返回值为新长度.</li>
<li><code>unshift()</code>使用<code>unshift()</code>方法在数组的开端添加一个或者多个元素.</li>
</ul>
<p>删除:</p>
<ul>
<li>直接用delete删除,如:<code>delete a[0];</code>,他不会改变元素的索引位置和长度,只是把那个元素变为<code>undefined</code>.</li>
<li><code>pop()</code>删除最后一个值,长度减一.返回值为删除的那个元素.</li>
<li><code>shift()</code>方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。</li>
</ul>
<p>实例:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>数组的添加和删除<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 直接对新索引值进行赋值</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> a1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span></span><br><span class="line"><span class="undefined">    a1[3] = 4;</span></span><br><span class="line"><span class="undefined">    a1[4] = 5;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="comment">//直接用delete删除</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">delete</span> a1[<span class="number">0</span>];<span class="comment">//不影响长度</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="comment">//末尾的添加，删除</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(a1.push(<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>));<span class="comment">//8</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(a1);<span class="comment">//[undefined,2,3,4,5,10,20,30]</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="comment">//删除最后一个，长度减1</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(a1.pop());<span class="comment">//30</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="comment">//开头添加，删除</span></span></span><br><span class="line"><span class="actionscript">    <span class="comment">//shift unshift</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> a2 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(a2.shift());<span class="comment">//1</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="comment">// a2.unshift(10,20,30);</span></span></span><br><span class="line"><span class="undefined">    a2.unshift(10);</span></span><br><span class="line"><span class="undefined">    a2.unshift(20);</span></span><br><span class="line"><span class="undefined">    a2.unshift(30);</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(a2);<span class="comment">//[30,20,10,2,3,4,5]</span></span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="join-方法"><a href="#join-方法" class="headerlink" title="join()方法"></a>join()方法</h3><p><code>join()</code>方法,数组拼接,不会改变原有数组,只是将拼接的字符串作为返回值,默认用<code>,</code>拼接.</p>
<figure class="highlight processing"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">var a2 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>];</span><br><span class="line"><span class="comment">//join 数组拼接</span></span><br><span class="line">console.<span class="built_in">log</span>(a2.<span class="built_in">join</span>());<span class="comment">//1,2,3,4,5,6</span></span><br><span class="line">console.<span class="built_in">log</span>(a2.<span class="built_in">join</span>(<span class="string">''</span>));<span class="comment">//123456</span></span><br><span class="line">console.<span class="built_in">log</span>(a2.<span class="built_in">join</span>(<span class="string">'*'</span>));<span class="comment">//1*2*3*4*5*6</span></span><br><span class="line">console.<span class="built_in">log</span>(a2.<span class="built_in">join</span>(<span class="string">'+'</span>));<span class="comment">//1+2+3+4+5+6</span></span><br><span class="line">console.<span class="built_in">log</span>(a2);<span class="comment">//[1,2,3,4,5,6],可见原有数组并不会发生改变</span></span><br></pre></td></tr></table></figure>
<h3 id="reverse-方法"><a href="#reverse-方法" class="headerlink" title="reverse()方法"></a>reverse()方法</h3><p><code>reverse()</code>颠倒方法,将数组中元素的位置颠倒。第一个数组元素成为最后一个数组元素，最后一个数组元素成为第一个。reverse 方法颠倒数组中元素的位置，并返回该数组的引用。</p>
<figure class="highlight lua"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">//<span class="built_in">reverse</span>颠倒，数组本身也被修改了</span><br><span class="line">var a4 = [<span class="string">'h'</span>, <span class="string">'e'</span>, <span class="string">'l'</span>, <span class="string">'l'</span>, <span class="string">'o'</span>];</span><br><span class="line">console.<span class="built_in">log</span>(a4.<span class="built_in">reverse</span>());//[<span class="string">'o'</span>, <span class="string">'l'</span>, <span class="string">'l'</span>, <span class="string">'e'</span>, <span class="string">'h'</span>]</span><br><span class="line">console.<span class="built_in">log</span>(a4.<span class="built_in">reverse</span>());//[<span class="string">'h'</span>, <span class="string">'e'</span>, <span class="string">'l'</span>, <span class="string">'l'</span>, <span class="string">'o'</span>]</span><br></pre></td></tr></table></figure>
<h3 id="sort-方法-对数组进行排序"><a href="#sort-方法-对数组进行排序" class="headerlink" title="sort()方法,对数组进行排序"></a>sort()方法,对数组进行排序</h3><p><code>sort()</code>方法在适当的位置对数组的元素进行排序，并返回数组。 sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。<br>参数为一个函数,如果没有参数,默认按<code>unicode</code>码进行排序.</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a9 = [<span class="number">10</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">80</span>];</span><br><span class="line">    <span class="built_in">console</span>.log(a9.sort());<span class="comment">//按照字符的编码进行排序，默认从小到大,比较的是第一个字符.</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// sort传入参数进行排序</span></span><br><span class="line">    a9.sort(<span class="function"><span class="keyword">function</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">"a = %d, b = %d"</span>, a, b);</span><br><span class="line"></span><br><span class="line">      <span class="comment">//从小到大排序为a-b,从大到小排序为b-a</span></span><br><span class="line">      <span class="keyword">return</span> a - b;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="comment">//影响原数组</span></span><br><span class="line">    <span class="built_in">console</span>.log(a9);</span><br></pre></td></tr></table></figure>
<h3 id="concat方法，连接数组并返回一个新数组"><a href="#concat方法，连接数组并返回一个新数组" class="headerlink" title="concat方法，连接数组并返回一个新数组"></a>concat方法，连接数组并返回一个新数组</h3><p><code>concat()</code>方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。</p>
<figure class="highlight lsl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">var num1 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line">var num2 = [<span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>];</span><br><span class="line">var num3 = [<span class="number">7</span>, <span class="number">8</span>, <span class="number">9</span>];</span><br><span class="line"><span class="comment">// 组成新数组[1, 2, 3, 4, 5, 6, 7, 8, 9]; 原数组 num1, num2, num3 未被修改</span></span><br><span class="line">var nums = num1.concat(num2, num3);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">var alpha = [<span class="string">"a"</span>, <span class="string">"b"</span>, <span class="string">"c"</span>];</span><br><span class="line">var numeric = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="comment">// 组成新数组 ["a", "b", "c", 1, 2, 3]; 原数组 alpha 和 numeric 未被修改</span></span><br><span class="line">var alphaNumeric = alpha.concat(numeric);</span><br></pre></td></tr></table></figure>
<h3 id="slice-方法，对数组内容进行浅复制"><a href="#slice-方法，对数组内容进行浅复制" class="headerlink" title="slice 方法，对数组内容进行浅复制"></a>slice 方法，对数组内容进行浅复制</h3><p><code>slice()</code>方法返回一份从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象.原始数组不会被改变.<br>两个参数:分别为开始位置和结束位置.都是可选参数.返回值为一个含有提取元素的新数组.</p>
<figure class="highlight lsl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//slice 数组切片</span></span><br><span class="line">   var a12 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>,<span class="number">10</span>];</span><br><span class="line"></span><br><span class="line">   <span class="comment">//begin end(不包含)</span></span><br><span class="line">   console.log(a12.slice(<span class="number">1</span>,<span class="number">4</span>));<span class="comment">//[2,3,4]</span></span><br><span class="line">   console.log(a12.slice());<span class="comment">//全切</span></span><br><span class="line">   console.log(a12.slice(<span class="number">3</span>));<span class="comment">//从3开始切，到最后</span></span><br><span class="line">   console.log(a12.slice(<span class="number">-7</span>,<span class="number">8</span>));<span class="comment">//从4开始。。。。。</span></span><br><span class="line"></span><br><span class="line">   var result = a12.slice(<span class="number">0</span>,<span class="number">3</span>);</span><br><span class="line">   result[<span class="number">0</span>] = <span class="number">100</span>;</span><br><span class="line">   <span class="comment">//result, a12不是同一块内存地址，相互不影响</span></span><br><span class="line">   console.log(a12, result);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">   <span class="comment">//slice浅复制(引用类型)</span></span><br><span class="line">   var a13 = [[<span class="number">100</span>,<span class="number">200</span>,<span class="number">300</span>],<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line">   result = a13.slice(<span class="number">0</span>,<span class="number">3</span>);</span><br><span class="line"></span><br><span class="line">   <span class="comment">//修改切片后的数组</span></span><br><span class="line">   result[<span class="number">0</span>][<span class="number">0</span>] = <span class="number">1000</span>;</span><br><span class="line">   console.log(a13, result);<span class="comment">//互相影响,引用的是同一块内存地址.</span></span><br></pre></td></tr></table></figure>
<h3 id="splice-对数组元素进行替换修改"><a href="#splice-对数组元素进行替换修改" class="headerlink" title="splice　对数组元素进行替换修改"></a>splice　对数组元素进行替换修改</h3><p>splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。   </p>
<p>语法:</p>
<ul>
<li>array.splice(start)</li>
<li>array.splice(start, deleteCount)</li>
<li>array.splice(start, deleteCount, item1, item2, …)</li>
</ul>
<p>参数:</p>
<ul>
<li>start​:指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从1计数）。</li>
<li>deleteCount 可选 :整数，表示要移除的数组元素的个数。如果 deleteCount 是 0，则不移除元素。这种情况下，至少应添加一个新元素。如果 deleteCount 大于start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。如果deleteCount被省略，则其相当于(arr.length - start)。</li>
<li>item1, item2, … 可选:要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。</li>
</ul>
<p>返回值:</p>
<p>由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。</p>
<figure class="highlight maxima"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">splice: 添加，删除，修改</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="built_in">var</span> myFish = [<span class="string">"angel"</span>, <span class="string">"clown"</span>, <span class="string">"mandarin"</span>, <span class="string">"surgeon"</span>];</span><br><span class="line">result = myFish.<span class="built_in">splice</span>(<span class="number">0</span>,<span class="number">1</span>);//result，删除元素组成的数组</span><br><span class="line">console.<span class="built_in">log</span>(myFish,result);//['angel']</span><br><span class="line"></span><br><span class="line">//任意位置添加</span><br><span class="line">myFish.<span class="built_in">splice</span>(<span class="number">1</span>,<span class="number">0</span>,<span class="string">"hello"</span>, <span class="string">"world"</span>);</span><br><span class="line">console.<span class="built_in">log</span>(myFish);//[<span class="string">"clown"</span>,<span class="string">"hello"</span>, <span class="string">"world"</span>,<span class="string">"mandarin"</span>, <span class="string">"surgeon"</span>]</span><br><span class="line"></span><br><span class="line">//修改</span><br><span class="line">myFish.<span class="built_in">splice</span>(<span class="number">2</span>,<span class="number">1</span>, <span class="string">"china"</span>);</span><br><span class="line">console.<span class="built_in">log</span>(myFish);//[<span class="string">"clown"</span>,<span class="string">"hello"</span>, <span class="string">"china"</span>,<span class="string">"mandarin"</span>, <span class="string">"surgeon"</span>]</span><br></pre></td></tr></table></figure>
<h3 id="toString-NaN"><a href="#toString-NaN" class="headerlink" title="toString()"></a>toString()</h3><p><code>toString()</code> 返回一个字符串，表示指定的数组及其元素。与<code>join()</code>类似.但是他没有参数,只能以<code>,</code>连接.</p>
<figure class="highlight cal"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> monthNames = [<span class="string">'Jan'</span>, <span class="string">'Feb'</span>, <span class="string">'Mar'</span>, <span class="string">'Apr'</span>];</span><br><span class="line"><span class="keyword">var</span> myVar = monthNames.toString(); // assigns <span class="string">"Jan,Feb,Mar,Apr"</span> <span class="keyword">to</span> myVar.</span><br></pre></td></tr></table></figure>
<h3 id="ECMA5中数组新方法"><a href="#ECMA5中数组新方法" class="headerlink" title="ECMA5中数组新方法"></a>ECMA5中数组新方法</h3><h4 id="array-forEach"><a href="#array-forEach" class="headerlink" title="array.forEach()"></a>array.forEach()</h4><p><code>array.forEach(callback[, thisArg])</code></p>
<p>callback 在数组每一项上执行的函数，接收三个参数：</p>
<ul>
<li>currentValue, 当前项（指遍历时正在被处理那个数组项）的值。</li>
<li>index, 当前项的索引（或下标）。</li>
<li>array, 数组本身。</li>
<li>thisArg 可选参数。用来当作callback 函数内this的值的对象.</li>
</ul>
<blockquote>
<p> forEach在遍历完数组元素之前是不会终止的.</p>
</blockquote>
<figure class="highlight lsl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// forEach直接遍历</span></span><br><span class="line">var a14 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>];</span><br><span class="line">var sum = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 直接遍历</span></span><br><span class="line">a14.forEach(function(current,index, arr)&#123;</span><br><span class="line">  console.log(<span class="string">"current = "</span>, current);</span><br><span class="line">  <span class="comment">// console.log("index = ", index);</span></span><br><span class="line">  <span class="comment">// console.log("arr = ", arr);</span></span><br><span class="line">  sum += current;</span><br><span class="line">&#125;);</span><br><span class="line">console.log(sum);</span><br></pre></td></tr></table></figure>
<h4 id="array-map"><a href="#array-map" class="headerlink" title="array.map()"></a>array.map()</h4><p><code>array.map(callback[, thisArg])</code></p>
<p>callback 在数组每一项上执行的函数，接收三个参数：</p>
<ul>
<li>currentValue, 当前项（指遍历时正在被处理那个数组项）的值。</li>
<li>index, 当前项的索引（或下标）。</li>
<li>array, 数组本身。</li>
</ul>
<p>thisArg 可选参数。用来当作callback 函数内this的值的对象。</p>
<p>返回值： 一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// for (var i = 0; i &lt; a14.length; i++) &#123;</span></span><br><span class="line"><span class="comment">//   a14[i] += 10;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//map 等价于上面的函数</span></span><br><span class="line"><span class="keyword">var</span> result = a14.map(<span class="function"><span class="keyword">function</span>(<span class="params">current,index,arr</span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//map需要每次返回，由返回的数据共同组成一个新数组</span></span><br><span class="line">   <span class="keyword">return</span> current + <span class="number">10</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(result);</span><br></pre></td></tr></table></figure>
<h4 id="indexOf"><a href="#indexOf" class="headerlink" title="indexOf()"></a>indexOf()</h4><p><code>arr.indexOf(searchElement[, fromIndex = 0])</code></p>
<ul>
<li>searchElement   要查找的元素        </li>
<li>fromIndex     指定开始位置,默认为0  </li>
</ul>
<p>返回给定元素能找在数组中找到的第一个索引值，否则返回-1。  </p>
<figure class="highlight lsl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var a15 = [<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>,<span class="number">20</span>,<span class="number">80</span>,<span class="number">60</span>,<span class="number">34</span>];</span><br><span class="line">console.log(a15.indexOf(<span class="number">20</span>));<span class="comment">//1</span></span><br><span class="line">console.log(a15.indexOf(<span class="number">200</span>));<span class="comment">//-1</span></span><br></pre></td></tr></table></figure>
<h4 id="filter"><a href="#filter" class="headerlink" title="filter()"></a>filter()</h4><p><code>arr.filter(callback[, thisArg])</code></p>
<p>callback 用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。</p>
<ul>
<li>element, 当前项（指遍历时正在被处理那个数组项）的值。</li>
<li>index, 当前项的索引（或下标）。</li>
<li>array, 数组本身。</li>
</ul>
<p>返回true表示保留该元素（通过测试），false则不保留。该方法的返回值为通过测试的元素组成的新的数组.<br>thisArg 可选。执行 callback 时的用于 this 的值。</p>
<p>实例:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>filter方法<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>,<span class="number">10</span>];</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> b = a.filter(<span class="function"><span class="keyword">function</span><span class="params">(element,index,array)</span></span>&#123;</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">return</span> element % <span class="number">2</span> === <span class="number">0</span>;<span class="comment">//其返回值为true的元素,都被添加到了其返回值中.</span></span></span><br><span class="line"><span class="actionscript">        <span class="comment">// 上面的代码等价于下面的</span></span></span><br><span class="line"><span class="undefined">        /*</span></span><br><span class="line"><span class="actionscript">         <span class="keyword">if</span>(element%<span class="number">2</span>===<span class="number">0</span>)&#123;</span></span><br><span class="line"><span class="actionscript">          <span class="keyword">return</span> <span class="literal">true</span>;</span></span><br><span class="line"><span class="actionscript">         &#125;<span class="keyword">else</span>&#123;</span></span><br><span class="line"><span class="actionscript">          <span class="keyword">return</span> <span class="literal">false</span>;</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">         */</span></span><br><span class="line"><span class="undefined">      &#125;)</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(a);<span class="comment">//[1,2,3,4,5,6,7,8,9,10],可见这个方法对原数组不会产生影响.</span></span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(b);<span class="comment">//[2,4,6,8,10]</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="comment">//如何将一个稀疏数组变为稠密数组?</span></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> x = [<span class="number">1</span>,,,,,,,,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,,,,<span class="number">7</span>];</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> y = x.filter(<span class="function"><span class="keyword">function</span><span class="params">(element,index,array)</span></span>&#123;</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">return</span> element === <span class="literal">undefined</span> ? <span class="literal">false</span> : <span class="literal">true</span> ;<span class="comment">//三目运算</span></span></span><br><span class="line"><span class="undefined">      &#125;)</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(y);</span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="every-和some"><a href="#every-和some" class="headerlink" title="every()和some()"></a>every()和some()</h4><p><code>array.every(callback[,thisArg])</code>,<code>array.some(callback[,thisArg])</code></p>
<p>callback 用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。<br>thisArg 可选。执行 callback 时的用于 this 的值。</p>
<p>不同点:     </p>
<ul>
<li><code>array.every()</code>只有所有元素都通过函数测试，才会返回true,否则返回false.</li>
<li><code>array.some()</code>只要其中一个元素通过了函数测试,就会返回true,全部不通过才会返回false.</li>
</ul>
<p>实例:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>every some<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> a = [<span class="number">2</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">8</span>,<span class="number">10</span>,<span class="number">12</span>,<span class="number">14</span>];</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(a.every(<span class="function"><span class="keyword">function</span>(<span class="params">element,index,array</span>)</span>&#123;</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">return</span> element%<span class="number">2</span>===<span class="number">0</span>;</span></span><br><span class="line"><span class="actionscript">      &#125;));<span class="comment">//true</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> b = [<span class="number">2</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">8</span>,<span class="number">10</span>,<span class="number">12</span>,<span class="number">13</span>];</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(b.every(<span class="function"><span class="keyword">function</span>(<span class="params">element,index,array</span>)</span>&#123;</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">return</span> element%<span class="number">2</span>===<span class="number">0</span>;</span></span><br><span class="line"><span class="actionscript">      &#125;));<span class="comment">//false</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> a = [<span class="number">2</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">7</span>,<span class="number">9</span>,<span class="number">11</span>,<span class="number">13</span>];</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(a.some(<span class="function"><span class="keyword">function</span>(<span class="params">element,index,array</span>)</span>&#123;</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">return</span> element%<span class="number">2</span>===<span class="number">0</span>;</span></span><br><span class="line"><span class="actionscript">      &#125;));<span class="comment">//true</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> a = [<span class="number">1</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">7</span>,<span class="number">9</span>,<span class="number">11</span>,<span class="number">13</span>];</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(a.some(<span class="function"><span class="keyword">function</span>(<span class="params">element,index,array</span>)</span>&#123;</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">return</span> element%<span class="number">2</span>===<span class="number">0</span>;</span></span><br><span class="line"><span class="actionscript">      &#125;));<span class="comment">//false</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="reduce"><a href="#reduce" class="headerlink" title="reduce()"></a>reduce()</h4><p><code>arr.reduce(callback,[initialValue])</code><br>callback  执行数组中每个值的函数，包含四个参数:</p>
<ul>
<li>previousValue   上一次调用回调返回的值，或者是提供的初始值（initialValue）        </li>
<li>currentValue   数组中当前被处理的元素          </li>
<li>index   当前元素在数组中的索引         </li>
<li>array   调用 reduce 的数组</li>
</ul>
<p>initialValue  作为第一次调用 callback 的第一个参数。<br>返回一个值。  </p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>reduce<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>,<span class="number">10</span>];</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> b = a.reduce(<span class="function"><span class="keyword">function</span><span class="params">(initvalue,element,index,array)</span></span>&#123;</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">return</span> initvalue + element;<span class="comment">//在不提供初始值的情况下,initvalue从数组的第一个值开始.</span></span></span><br><span class="line"><span class="actionscript">        <span class="comment">//本次的返回值会赋给initvalue</span></span></span><br><span class="line"><span class="undefined">      &#125;)</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(b);<span class="comment">//55</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="comment">//当然你也可以设置初始值,如下:</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> c = a.reduce(<span class="function"><span class="keyword">function</span><span class="params">(initvalue,element,index,array)</span></span>&#123;</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">return</span> initvalue * element;</span></span><br><span class="line"><span class="actionscript">      &#125;,<span class="number">1</span>)<span class="comment">//在这里设置初始值</span></span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(c);<span class="comment">//3628800</span></span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="JAVAScript"><a href="#JAVAScript" class="headerlink" title="JAVAScript"></a>JAVAScript</h2><p>JAVAScript与HTML之间的的交互是通过事件实现的.事件就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预定事件,以便事件发生时执行相应的代码.<br>JAVAScript事件的三要素:事件源, 事件, 事件处理程序三部分组成.</p>
<ul>
<li>事件源,指的是发生事件的对象</li>
<li>事件,指的是做了什么动作</li>
<li>事件处理程序,发生事件时要做的事</li>
</ul>
<h3 id="事件流"><a href="#事件流" class="headerlink" title="事件流"></a>事件流</h3><p>如果你单击了某个按钮,他们会认为不仅仅发生在按钮上.换句话说,在单击按钮的同时,你也单击了按钮的容器元素,甚至你也单击了整个页面.事件流描述的是从页面中接受时间的顺序.有意思的是ie和netspace开发团队提出了差不多是完全相反的事件流的概念.ie的事件流是事件冒泡流,而netspace是事件捕获流.</p>
<p><img src="http://assets.qipo.net/dom.png" alt></p>
<h4 id="事件冒泡"><a href="#事件冒泡" class="headerlink" title="事件冒泡"></a>事件冒泡</h4><p>ie的事件流叫做事件冒泡(event bubbling),即时间开始时由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播到较为不具体的节点(文档).</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Event Bubbling Example<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"myDiv"</span>&gt;</span>Click Me<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>如果你单击了页面中的<code>&lt;div&gt;</code>元素,那么这个click事件会按照如下顺序传播:</p>
<ol>
<li><code>&lt;div&gt;</code></li>
<li><code>&lt;body&gt;</code></li>
<li><code>&lt;html&gt;</code></li>
<li><code>document</code></li>
</ol>
<p>也就是说,click事件首先是在<code>&lt;div&gt;</code>元素上发生,而这个元素就是我们单击的元素.然后,click事件沿DOM树向上传播,在每一级节点上都会发生,直至传播到<code>document</code>对象.</p>
<h4 id="事件捕获"><a href="#事件捕获" class="headerlink" title="事件捕获"></a>事件捕获</h4><p>事件捕获的思想是不太具体的节点应该更早的接收到事件,而更具体的节点应该最后接收到事件.<br>如果仍以前面的HTML页面作为演示事件捕获的例子,那么单击<code>&lt;div&gt;</code>元素就会以下列顺序触发click事件.</p>
<ol>
<li><code>document</code></li>
<li><code>&lt;html&gt;</code></li>
<li><code>&lt;body&gt;</code></li>
<li><code>&lt;div&gt;</code></li>
</ol>
<p>在事件捕获过程中,document对象首先接收到click事件,然后事件沿DOM树依次向下,一直传播到时间的实际位置,即<code>&lt;div&gt;</code>元素.</p>
<blockquote>
<p>由于老版本的浏览器不支持,因此很少有人使用事件捕获.不过我们可以放心的使用事件冒泡.</p>
</blockquote>
<h4 id="DOM事件流"><a href="#DOM事件流" class="headerlink" title="DOM事件流"></a>DOM事件流</h4><p>DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首<br>先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶<br>段,可以在这个阶段对事件做出响应。</p>
<h3 id="事件处理程序"><a href="#事件处理程序" class="headerlink" title="事件处理程序"></a>事件处理程序</h3><p>事件就是用户或浏览器自身执行的某种动作。诸如 click 、 load 和 mouseover ,都是事件的名字。而响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以 “on” 开头,因此click 事件的事件处理程序就是 onclick , load 事件的事件处理程序就是 onload 。为事件指定处理程序的方式有好几种。</p>
<h4 id="HTML事件处理程序"><a href="#HTML事件处理程序" class="headerlink" title="HTML事件处理程序"></a>HTML事件处理程序</h4><p>某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的 HTML 特性来指定。这个<br>特性的值应该是能够执行的 JavaScript 代码。例如,要在按钮被单击时执行一些 JavaScript,可以像下面<br>这样编写代码:</p>
<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;input <span class="attribute">type</span>=<span class="string">"button"</span> <span class="attribute">value</span>=<span class="string">"Click Me"</span> <span class="attribute">onclick</span>=<span class="string">"alert('Clicked')"</span> /&gt;</span><br></pre></td></tr></table></figure>
<p>当单击这个按钮时,就会显示一个警告框。这个操作是通过指定 onclick 特性并将一些 JavaScript<br>代码作为它的值来定义的。</p>
<p>实例:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>原生事件event<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">      * &#123;</span></span><br><span class="line"><span class="undefined">        margin: 0;</span></span><br><span class="line"><span class="undefined">        padding: 0;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="css">      <span class="selector-class">.one</span> &#123;</span></span><br><span class="line"><span class="undefined">        width: 200px;</span></span><br><span class="line"><span class="undefined">        height: 200px;</span></span><br><span class="line"><span class="undefined">        background: blue;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="function"><span class="keyword">function</span> <span class="title">clickDiv</span><span class="params">()</span></span>&#123;</span></span><br><span class="line"><span class="actionscript">      alert(<span class="string">"我被点了。。。"</span>);</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- html中添加事件  --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"btn"</span> <span class="attr">onclick</span>=<span class="string">"alert('我被点了。。。')"</span>&gt;</span>点我<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"one"</span> <span class="attr">onclick</span>=<span class="string">"clickDiv()"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="DOM0级事件处理程序"><a href="#DOM0级事件处理程序" class="headerlink" title="DOM0级事件处理程序"></a>DOM0级事件处理程序</h4><p>通过 JavaScript 指定事件处理程序的传统方式,就是将一个函数赋值给一个事件处理程序属性。这种为事件处理程序赋值的方法是在第四代 Web 浏览器中出现的,而且至今仍然为所有现代浏览器所支持。原因一是简单,二是具有跨浏览器的优势。要使用 JavaScript 指定事件处理程序,首先必须取得一个要操作的对象的引用。</p>
<p>每个元素(包括 window 和 document )都有自己的事件处理程序属性,这些属性通常全部小写,<br>例如 onclick 。将这种属性的值设置为一个函数,就可以指定事件处理程序,如下所示:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"myBtn"</span>);</span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">alert(<span class="string">"Clicked"</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p>也可以删除通过 DOM0 级方法指定的事件处理程序,只要像下面这样将事件处理程序属性的值设<br>置为 null 即可:</p>
<figure class="highlight 1c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">btn.onclick = <span class="literal">null</span>;<span class="comment">//删除事件处理程序</span></span><br></pre></td></tr></table></figure>
<p>将事件处理程序设置为 null 之后,再单击按钮将不会有任何动作发生。</p>
<p>实例:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>event事件注册<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"btn1"</span>&gt;</span>按钮1<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"btn2"</span>&gt;</span>按钮2<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="comment">//通过document.getElementById方法得到DOM对象</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> btn1 = <span class="built_in">document</span>.getElementById(<span class="string">"btn1"</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> btn2 = <span class="built_in">document</span>.getElementById(<span class="string">"btn2"</span>);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="comment">//使用DOM0级的方式注册一个事件处理程序</span></span></span><br><span class="line"><span class="undefined">    /*</span></span><br><span class="line"><span class="undefined">    缺点：</span></span><br><span class="line"><span class="undefined">    1. 同一个事件，只能注册一个事件处理程序！！！！</span></span><br><span class="line"><span class="undefined">    2. 移除一个事件程序，不方便</span></span><br><span class="line"><span class="undefined">    */</span></span><br><span class="line"><span class="actionscript">    btn1.onclick = <span class="function"><span class="keyword">function</span> <span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">"%c按钮1被点击了xxxxx"</span>, <span class="string">"color: red;font-size:50px"</span>);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="comment">// 移除一个事件处理程序</span></span></span><br><span class="line"><span class="actionscript">      btn1.onclick = <span class="literal">null</span>;</span></span><br><span class="line"><span class="undefined">    &#125;;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    btn2.onclick = <span class="function"><span class="keyword">function</span> <span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">"%c按钮2被单击了"</span>, <span class="string">"color: red;font-size:50px"</span>);</span></span><br><span class="line"><span class="undefined">    &#125;;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    btn2.ondblclick = <span class="function"><span class="keyword">function</span> <span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">"%c按钮2被双击了"</span>, <span class="string">"color: green;font-size:50px"</span>);</span></span><br><span class="line"><span class="undefined">    &#125;;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="DOM2级事件处理程序"><a href="#DOM2级事件处理程序" class="headerlink" title="DOM2级事件处理程序"></a>DOM2级事件处理程序</h4><p>“DOM2 级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作: <code>addEventListener()</code><br>和 <code>removeEventListener()</code> 。所有 DOM 节点中都包含这两个方法,并且它们都接受 3 个参数:要处<br>理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true ,表示在捕获<br>阶段调用事件处理程序;如果是 false ,表示在冒泡阶段调用事件处理程序。<br>要在按钮上为 click 事件添加事件处理程序,可以使用下列代码:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"myBtn"</span>);</span><br><span class="line">btn.addEventListener(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">alert(<span class="keyword">this</span>.id);</span><br><span class="line">&#125;, <span class="literal">false</span>);</span><br></pre></td></tr></table></figure>
<p>上面的代码为一个按钮添加了 onclick 事件处理程序,而且该事件会在冒泡阶段被触发(因为最<br>后一个参数是 false )。与 DOM0 级方法一样,这里添加的事件处理程序也是在其依附的元素的作用域<br>中运行。使用 DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。来看下面的<br>例子。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"myBtn"</span>);</span><br><span class="line">btn.addEventListener(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">alert(<span class="keyword">this</span>.id);</span><br><span class="line">&#125;, <span class="literal">false</span>);</span><br><span class="line">btn.addEventListener(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">alert(<span class="string">"Hello world!"</span>);</span><br><span class="line">&#125;, <span class="literal">false</span>);</span><br></pre></td></tr></table></figure>
<p>这里不推荐使用匿名函数来添加事件,会导致<code>removeEventListener()</code>,因为传入<code>removeEnventListener()</code>的事件处理函数必须和<code>addEnventListener()</code>一致.所以应该如下所示:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>DOM2级event<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"btn"</span>&gt;</span>按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="function"><span class="keyword">function</span> <span class="title">handler1</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">"%c 单击111"</span>, <span class="string">"color:red;font-size:40px"</span>);</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="function"><span class="keyword">function</span> <span class="title">handler2</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">"%c 单击222"</span>, <span class="string">"color:red;font-size:40px"</span>);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="comment">// 移除click事件的第一个事件处理程序</span></span></span><br><span class="line"><span class="actionscript">      <span class="comment">// 要想移除处理函数，那么该函数必须有名字(在指定的作用域中可访问到)</span></span></span><br><span class="line"><span class="actionscript">      btn.removeEventListener(<span class="string">'click'</span>, handler1, <span class="literal">false</span>);</span></span><br><span class="line"><span class="actionscript">      btn.removeEventListener(<span class="string">'click'</span>, handler2, <span class="literal">false</span>);</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    btn.addEventListener(<span class="string">'click'</span>, handler1, <span class="literal">false</span>);</span></span><br><span class="line"><span class="actionscript">    btn.addEventListener(<span class="string">'click'</span>, handler2, <span class="literal">false</span>);</span></span><br><span class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>DOM2级的事件执行顺序和注册顺序相同.</p>
</blockquote>
<h4 id="ie的事件处理程序"><a href="#ie的事件处理程序" class="headerlink" title="ie的事件处理程序"></a>ie的事件处理程序</h4><p>IE 实现了与 DOM 中类似的两个方法: <code>attachEvent()</code> 和 <code>detachEvent()</code> 。这两个方法接受相同的两个参数:事件处理程序名称与事件处理程序函数。由于 IE8 及更早版本只支持事件冒泡,所以通过<code>attachEvent()</code>添加的事件处理程序都会被添加到冒泡阶段。<br>要使用 <code>attachEvent()</code> 为按钮添加一个事件处理程序,可以使用以下代码。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"myBtn"</span>);</span><br><span class="line">btn.attachEvent(<span class="string">"onclick"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">alert(<span class="string">"Clicked"</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<blockquote>
<p>注意: <code>attachEvent()</code>中的第一个参数为<code>onclick</code>,而不是DOM二级中的<code>click</code>.<br>还有在同一个元素上注册相同的事件,其执行顺序和注册顺序相反,这也是和DOM2级不同的.<br>DOM0级被认为是元素的方法,所以其this引用当前的元素;  IE事件处理程序的this等于window.</p>
</blockquote>
<p>使用 <code>attachEvent()</code> 添加的事件可以通过 <code>detachEvent()</code> 来移除,条件是必须提供相同的参数。<br>与 DOM 方法一样,这也意味着添加的匿名函数将不能被移除。不过,只要能够将对相同函数的引用传<br>给 <code>detachEvent()</code> ,就可以移除相应的事件处理程序。例如:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"myBtn"</span>);</span><br><span class="line"><span class="keyword">var</span> handler = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">alert(<span class="string">"Clicked"</span>);</span><br><span class="line">&#125;;</span><br><span class="line">btn.attachEvent(<span class="string">"onclick"</span>, handler);</span><br><span class="line"><span class="comment">//这里省略了其他代码</span></span><br><span class="line">btn.detachEvent(<span class="string">"onclick"</span>, handler);</span><br></pre></td></tr></table></figure>
<p>这个例子将保存在变量 handler 中的函数作为事件处理程序。因此,后面的 <code>detachEvent()</code> 可以<br>使用相同的函数来移除事件处理程序</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>DOM2级event<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"btn"</span>&gt;</span>按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="function"><span class="keyword">function</span> <span class="title">handler1</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">"%c 单击111"</span>, <span class="string">"color:red;font-size:40px"</span>);</span></span><br><span class="line"><span class="actionscript">      btn.detachEvent(<span class="string">'onclick'</span>, handler2);</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="function"><span class="keyword">function</span> <span class="title">handler2</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">"%c 单击222"</span>, <span class="string">"color:red;font-size:40px"</span>);</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">    /*</span></span><br><span class="line"><span class="undefined">    ie： DOM2级的事件处理</span></span><br><span class="line"><span class="undefined">    ie: 处理程序的执行顺序是和注册顺序相反的</span></span><br><span class="line"><span class="undefined">    */</span></span><br><span class="line"><span class="actionscript">    btn.attachEvent(<span class="string">'onclick'</span>, handler1);</span></span><br><span class="line"><span class="actionscript">    btn.attachEvent(<span class="string">'onclick'</span>, handler2);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">    <span class="built_in">document</span>.attachEvent(<span class="string">'onclick'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">"doucment被触发。。。。"</span>);</span></span><br><span class="line"><span class="undefined">    &#125;);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="跨浏览器的事件处理程序"><a href="#跨浏览器的事件处理程序" class="headerlink" title="跨浏览器的事件处理程序"></a>跨浏览器的事件处理程序</h4><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"btn"</span>&gt;</span>btn<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">name</span>=<span class="string">"button"</span> <span class="attr">id</span>=<span class="string">"btn1"</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">    /*</span></span><br><span class="line"><span class="undefined">        功能：兼容浏览器的事件注册函数</span></span><br><span class="line"><span class="undefined">        @elem, 指定要注册的DOM对象</span></span><br><span class="line"><span class="undefined">        @type, 指定要注册的事件名称</span></span><br><span class="line"><span class="undefined">        @handler, 指定的事件处理函数</span></span><br><span class="line"><span class="undefined">        */</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="function"><span class="keyword">function</span> <span class="title">addEvent</span><span class="params">(elem, type, handler)</span> </span>&#123;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="comment">//判断是否支持该方法，支持就为true，不支持就为false</span></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">if</span> (elem.addEventListener) &#123;</span></span><br><span class="line"><span class="actionscript">        elem.addEventListener(type, handler, <span class="literal">false</span>);</span></span><br><span class="line"><span class="actionscript">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (elem.attachEvent) &#123;</span></span><br><span class="line"><span class="actionscript">        elem.attachEvent(<span class="string">'on'</span> + type, handler);</span></span><br><span class="line"><span class="actionscript">      &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="actionscript">        elem[<span class="string">'on'</span> + type] = handler;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> deal = <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">"btn 点击。。。。。"</span>);</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="actionscript">    addEvent(btn, <span class="string">'click'</span>, deal);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    addEvent(btn, <span class="string">'dblclick'</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">"btn 双击。。。。。"</span>);</span></span><br><span class="line"><span class="undefined">    &#125;);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 编写 removeEvent来移除事件！！！！！</span></span></span><br><span class="line"><span class="actionscript">    <span class="function"><span class="keyword">function</span> <span class="title">removeEvent</span><span class="params">(elem, type, handler)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">if</span> (elem.removeEventListener) &#123;</span></span><br><span class="line"><span class="actionscript">        elem.removeEventListener(type, handler, <span class="literal">false</span>);</span></span><br><span class="line"><span class="actionscript">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (elem.detachEvent) &#123;</span></span><br><span class="line"><span class="actionscript">        elem.detachEvent(<span class="string">'on'</span> + type, handler);</span></span><br><span class="line"><span class="actionscript">      &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="actionscript">        elem[<span class="string">'on'</span> + type] = <span class="literal">null</span>;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    removeEvent(btn, <span class="string">'click'</span>, deal)</span></span><br><span class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="事件对象"><a href="#事件对象" class="headerlink" title="事件对象"></a>事件对象</h3><p>在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对象中,会包括鼠标的位置,而键盘操作导致的事件对象中,会包含与按下键的信息.所有浏览器都支持event对象,但支持方式不同.</p>
<h4 id="DOM中的事件对象"><a href="#DOM中的事件对象" class="headerlink" title="DOM中的事件对象"></a>DOM中的事件对象</h4><p>兼容DOM的浏览器都会将一个event对象传入到事件处理程序中.无论指定事件处理程序使用的是什么方法(DOM0级或DOM2级),都会传入event对象.来看下面的例子:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"myBtn"</span>);</span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">alert(event.type);<span class="comment">//"click"</span></span><br><span class="line">&#125;;</span><br><span class="line">btn.addEventListener(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">alert(event.type);<span class="comment">//"click"</span></span><br><span class="line">&#125;, <span class="literal">false</span>);</span><br></pre></td></tr></table></figure>
<p>这个例子的两个事件处理程序都会弹出一个警告框,显示由event.type属性表示的事件类型.这个属性始终都会包含被触发的事件类型.</p>
<p>|——|——-|<br>|属性|说明|<br>|event.type|被触发的事件类型|<br>|this|注册该事件处理程序的元素|<br>|event.currentTarget|注册该事件处理函数的元素|<br>|event.target|触发该事件源头的元素|<br>|event.stopPropagation()|阻止事件的传递|<br>|event.preventDefault()|阻止默认行为|<br>|event.stopImmediatePropagation()|停止冒泡,并且停止后续所有的事件处理程序|</p>
<p>键盘事件对象</p>
<p>|——|——-|<br>|event.key|具体按下哪个键,识别大小写|<br>|event.code|按下的是哪个键,不识别大小写|</p>
<p>鼠标事件对象</p>
<p>|———|———|<br>|event.screenX|点击时鼠标处于屏幕的X轴位置|<br>|event.screenY|点击时鼠标处于屏幕的Y轴的位置|<br>|event.clientX|点击时鼠标处于浏览器可视窗口的X轴位置|<br>|event.clientY|点击时鼠标处于浏览器可视窗口的Y轴位置|<br>|event.pageX|点击时鼠标处于页面的X轴位置|<br>|event.pageY|点击时鼠标处于页面的Y轴位置|<br>|event.which|鼠标点击的是哪个键,左(1),中(2),右(3)|<br>|event.button|鼠标点击的是哪个键,左(0),中(1),右(2)|</p>
<p>手机触摸</p>
<p>|——–|——-|——-|<br>|事件|touchstart|手指放上去|<br>|事件|touchmove|手指移动|<br>|事件|touchend|手指离开|</p>
<p>手机触摸实例:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>touch<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> startX,startY,endX,endY,X,Y;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">document</span>.addEventListener(<span class="string">'touchstart'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">         <span class="built_in">window</span>.startX = event.touches[<span class="number">0</span>].clientX;</span></span><br><span class="line"><span class="javascript">         <span class="built_in">window</span>.startY = event.touches[<span class="number">0</span>].clientY;</span></span><br><span class="line"><span class="actionscript">      &#125;,<span class="literal">false</span>);</span></span><br><span class="line"><span class="javascript">      <span class="built_in">document</span>.addEventListener(<span class="string">'touchend'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">         <span class="built_in">window</span>.endX = event.changedTouches[<span class="number">0</span>].clientX;</span></span><br><span class="line"><span class="javascript">         <span class="built_in">window</span>.endY = event.changedTouches[<span class="number">0</span>].clientY;</span></span><br><span class="line"><span class="undefined">         X = startX - endX;</span></span><br><span class="line"><span class="undefined">         Y = startY - endY;</span></span><br><span class="line"><span class="javascript">         <span class="built_in">console</span>.log(X);</span></span><br><span class="line"><span class="javascript">         <span class="built_in">console</span>.log(Y);</span></span><br><span class="line"><span class="javascript">         <span class="keyword">if</span>(<span class="built_in">Math</span>.abs(X)&gt;<span class="built_in">Math</span>.abs(Y))&#123;</span></span><br><span class="line"><span class="actionscript">           <span class="keyword">if</span>(X&gt;<span class="number">0</span>)&#123;</span></span><br><span class="line"><span class="actionscript">             alert(<span class="string">'向左滑动'</span>);</span></span><br><span class="line"><span class="undefined">           &#125;</span></span><br><span class="line"><span class="actionscript">           <span class="keyword">if</span>(X&lt;<span class="number">0</span>)&#123;</span></span><br><span class="line"><span class="actionscript">             alert(<span class="string">'向右滑动'</span>);</span></span><br><span class="line"><span class="undefined">           &#125;;</span></span><br><span class="line"><span class="undefined">         &#125;;</span></span><br><span class="line"><span class="javascript">          <span class="keyword">if</span>(<span class="built_in">Math</span>.abs(X)&lt;=<span class="built_in">Math</span>.abs(Y))&#123;</span></span><br><span class="line"><span class="actionscript">            <span class="keyword">if</span>(Y&gt;<span class="number">0</span>)&#123;</span></span><br><span class="line"><span class="actionscript">              alert(<span class="string">'向上滑动'</span>);</span></span><br><span class="line"><span class="undefined">            &#125;;</span></span><br><span class="line"><span class="actionscript">            <span class="keyword">if</span>(Y&lt;<span class="number">0</span>)&#123;</span></span><br><span class="line"><span class="actionscript">              alert(<span class="string">'向下滑动'</span>);</span></span><br><span class="line"><span class="undefined">            &#125;;</span></span><br><span class="line"><span class="undefined">          &#125;;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      &#125;,<span class="literal">false</span>);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="ie中的事件对象"><a href="#ie中的事件对象" class="headerlink" title="ie中的事件对象"></a>ie中的事件对象</h4><p>与访问DOM中的event对象不同,要访问IE中的event对象有几种不同的方式,取决于指定事件处理程序的方法.在使用DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在.</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"myBtn"</span>);</span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"><span class="keyword">var</span> event = <span class="built_in">window</span>.event;</span><br><span class="line">alert(event.type);</span><br><span class="line"><span class="comment">//"click"</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p>在此,我们通过window.event取得了event对象,并检测了被触发事件的类型(IE中的type属性与DOM中的type属性是相同的).可是,如果事件处理程序是使用<code>attachEvent()</code>添加的,那么就会有一个event对象作为参数被传入事件处理程序函数中,如下所示:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"myBtn"</span>);</span><br><span class="line">btn.attachEvent(<span class="string">"onclick"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">alert(event.type);</span><br><span class="line"><span class="comment">//"click"</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>在像这样使用<code>attachEvent()</code>的情况下,也可以通过window对象来访问event对象,就像使用DOM0级方法一样.不过为方便起见,同一个对象也会作为参数传递.</p>
<p>IE的event对象同样也包含与创建它的事件相关的属性和方法.其中很多属性和方法都有对应的或者相关的DOM属性和方法.与DOM的event对象一样,这些属性和方法也会因为事件类型不同而不同,但所有事件对象都会包含下表所类的属性和方法.</p>
<p>|———|———|<br>|cancelBubble|默认值为 false ,但将其设置为 true 就可以取消事件冒泡(与DOM中的 stopPropagation() 方法的作用相同)|<br>|returnValue|默认值为 true ,但将其设置为 false 就可以取消事件的默认行为(与DOM中的 preventDefault() 方法的作用相同)|<br>|srcElement|事件的目标(与DOM中的 target 属性相同)|<br>|type|被触发的事件的类型|</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>ie中的event对象<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"btn"</span>&gt;</span>按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://www.baidu.com"</span> <span class="attr">id</span>=<span class="string">"ln"</span> <span class="attr">target</span>=<span class="string">"_blank"</span>&gt;</span>超链接<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="built_in">window</span>);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> ln = <span class="built_in">document</span>.getElementById(<span class="string">"ln"</span>);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    btn.onclick = <span class="function"><span class="keyword">function</span> <span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="comment">//ie低版本中处理函数中，没有event对象</span></span></span><br><span class="line"><span class="actionscript">      <span class="comment">//所以只能有window.event来代替</span></span></span><br><span class="line"><span class="actionscript">      <span class="comment">// console.log(window.event);</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="keyword">this</span>);</span></span><br><span class="line"><span class="actionscript">      <span class="comment">//ie 低版本中 window.event对象上，没有target,currentTarget</span></span></span><br><span class="line"><span class="actionscript">      <span class="comment">//使用srcElement取代target</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="comment">//停止事件冒泡！！！！</span></span></span><br><span class="line"><span class="actionscript">      <span class="comment">//cancelBubble 取代 stopPropagation()</span></span></span><br><span class="line"><span class="javascript">      <span class="built_in">window</span>.event.cancelBubble = <span class="literal">true</span>;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="comment">//document 在低版本ie onclick不行</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">document</span>.attachEvent(<span class="string">'onclick'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">"document....."</span>);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="comment">// window.event.srcElement是触发事件的源头</span></span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="built_in">window</span>.event.srcElement);</span></span><br><span class="line"><span class="actionscript">    &#125;,<span class="literal">false</span>);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    ln.onclick = <span class="function"><span class="keyword">function</span> <span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">      <span class="comment">// window.event.returnValue 的值来决定是否取消默认行为，</span></span></span><br><span class="line"><span class="actionscript">      <span class="comment">// 和 event.preventDefault() 功能一致</span></span></span><br><span class="line"><span class="javascript">      <span class="built_in">window</span>.event.returnValue = <span class="literal">false</span>;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>需要注意的是:<code>this</code>和<code>event.srcElement</code>在DOM0级中是相同的,但是用<code>attachEvent()</code>添加的事件处理程序,<code>this</code>和<code>event.srcElement</code>是不同的.</p>
</blockquote>
<h4 id="兼容浏览器的事件对象-基本"><a href="#兼容浏览器的事件对象-基本" class="headerlink" title="兼容浏览器的事件对象(基本)"></a>兼容浏览器的事件对象(基本)</h4><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>兼容浏览器的事件对象(基本)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"btn"</span>&gt;</span>按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    btn.onclick = <span class="function"><span class="keyword">function</span><span class="params">(event)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">      <span class="comment">// 使用或运算或者条件判断来 实现event的兼容</span></span></span><br><span class="line"><span class="javascript">      <span class="keyword">var</span> event = event || <span class="built_in">window</span>.event;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(event.target || event.srcElement);</span></span><br><span class="line"><span class="actionscript">      event.stopPropagation ? event.stopPropagation() : event.cancelBubblue = <span class="literal">true</span>;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="DOM对象模型"><a href="#DOM对象模型" class="headerlink" title="DOM对象模型"></a>DOM对象模型</h2><p>DOM为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.整个文档就是一棵树,树的根是<code>document</code></p>
<p><img src="http://assets.qipo.net/dom.jpg" alt></p>
<h3 id="node节点"><a href="#node节点" class="headerlink" title="node节点"></a>node节点</h3><p>整个文档全都是由节点构成的,包括元素(HTML标签),文字节点,属性节点.<br>每个节点都有一个nodeType属性,用于表明节点的类型.节点类型由在Node类型中定义的下列12个数值常量来表示,任何节点类型必居其一:</p>
<ul>
<li>Node.ELEMENT_NODE(1)；标签节点</li>
<li>Node.ATTRIBUTE_NODE(2)；</li>
<li>Node.TEXT_NODE(3)；文本节点</li>
<li>Node.CDATA_SECTION_NODE(4)；</li>
<li>Node.ENTITY_REFERENCE_NODE(5)；</li>
<li>Node.ENTITY_NODE(6)；</li>
<li>Node.PROCESSING_INSTRUCTION_NODE(7)；</li>
<li>Node.COMMENT_NODE(8)；</li>
<li>Node.DOCUMENT_NODE(9)；document节点</li>
<li>Node.DOCUMENT_TYPE_NODE(10)；</li>
<li>Node.DOCUMENT_FRAGMENT_NODE(11)；</li>
<li>Node.NOTATION_NODE(12)。</li>
</ul>
<blockquote>
<p>nodeName可以获得节点名称.</p>
</blockquote>
<h3 id="获得节点"><a href="#获得节点" class="headerlink" title="获得节点"></a>获得节点</h3><ul>
<li>document.getElementById(“id”) id 为标记的 #id</li>
<li>document.getElementsByTagName(“div”) 所有的div div</li>
<li>document.getElementsByClassName(“test”) 所有类名为 test</li>
</ul>
<p>id不能指定一个范围去查找元素,但是剩下的两个可以,如下:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    我是body</span><br><span class="line">    <span class="comment">&lt;!-- DOM操作，节点操作，元素操作  --&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"btn"</span>&gt;</span>按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">"items"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"item"</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"item"</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"item"</span>&gt;</span>3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"item"</span>&gt;</span>4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"item"</span>&gt;</span>5<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span>&gt;</span>6<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span>&gt;</span>7<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"item"</span>&gt;</span>11<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"item"</span>&gt;</span>22<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"item"</span>&gt;</span>33<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="comment">//获得某个ul</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> items = <span class="built_in">document</span>.getElementById(<span class="string">"items"</span>);</span></span><br><span class="line"><span class="actionscript">    <span class="comment">//getElementsByClassName 可以指定在某个范围内去查找元素</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(items.getElementsByClassName(<span class="string">"item"</span>));<span class="comment">//5</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 通过 tagName 标签名</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementsByTagName(<span class="string">"li"</span>));<span class="comment">//10</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(items.getElementsByTagName(<span class="string">"li"</span>));<span class="comment">//7</span></span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>无论返回多少个节点,返回的都是伪数组,它是能够通过<code>[0]</code>位置索引,还有<code>length</code>,但是他没有数组的那些方法.</p>
</blockquote>
<h3 id="节点访问"><a href="#节点访问" class="headerlink" title="节点访问"></a>节点访问</h3><h4 id="父节点"><a href="#父节点" class="headerlink" title="父节点"></a>父节点</h4><p><code>var parent = obj.parentNode;</code></p>
<h4 id="兄弟节点"><a href="#兄弟节点" class="headerlink" title="兄弟节点"></a>兄弟节点</h4><p><code>nextSibling</code>,<code>nextElementSibling</code>都是下一个兄弟,但是<code>nextSibling</code>会将文本节点识别为兄弟,而<code>nextElementSibling</code>只会将标签识别为兄弟.<br><code>previousSibling</code>,<code>previousElementsibling</code>都是上一个兄弟,这两个和上面的相同.</p>
<figure class="highlight stata"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//兼容写法</span></span><br><span class="line"><span class="keyword">var</span> <span class="keyword">one</span> = document.getElementById('<span class="keyword">one</span>');</span><br><span class="line"><span class="keyword">var</span> next = <span class="keyword">one</span>.nextElementSibling || <span class="keyword">one</span>.nextSibling;</span><br></pre></td></tr></table></figure>
<h4 id="第一个节点和最后一个节点"><a href="#第一个节点和最后一个节点" class="headerlink" title="第一个节点和最后一个节点"></a>第一个节点和最后一个节点</h4><p><code>firstChild</code>,<code>lastChild</code>:会识别文本节点</p>
<p><code>firstElementChild</code>,<code>lastElementChild</code>:只识别标签</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">兼容写法</span><br><span class="line"> <span class="keyword">var</span> par = <span class="built_in">document</span>.getElementById(<span class="string">"par"</span>);</span><br><span class="line"> <span class="keyword">var</span> fist = par.firstElementChild || par.firstChild;</span><br><span class="line"> <span class="keyword">var</span> last = par.lastElementChild || par.lastChild;</span><br></pre></td></tr></table></figure>
<h4 id="父元素的所有子节点"><a href="#父元素的所有子节点" class="headerlink" title="父元素的所有子节点"></a>父元素的所有子节点</h4><p><code>childNodes</code>: 包含文本节点，比如空格和换行<br><code>children</code>: 仅仅包含标签,不用考虑兼容性，都适用。</p>
<figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> par = <span class="built_in">document</span>.getElementById(<span class="string">"par"</span>);</span><br><span class="line"><span class="keyword">var</span> childs = par.children;</span><br><span class="line"><span class="keyword">var</span> childs1 = par.childNodes;</span><br><span class="line"><span class="comment">//其中childs.length 要大于等于childs.length</span></span><br></pre></td></tr></table></figure>
<h3 id="DOM节点操作"><a href="#DOM节点操作" class="headerlink" title="DOM节点操作"></a>DOM节点操作</h3><h4 id="创建节点"><a href="#创建节点" class="headerlink" title="创建节点"></a>创建节点</h4><figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> test = <span class="built_in">document</span>.createElement(<span class="string">"div"</span>);</span><br><span class="line">  <span class="keyword">var</span> test1 = <span class="built_in">document</span>.createElement(<span class="string">"span"</span>);</span><br><span class="line">  创建div节点和span节点</span><br></pre></td></tr></table></figure>
<h4 id="添加节点"><a href="#添加节点" class="headerlink" title="添加节点"></a>添加节点</h4><figure class="highlight crmsh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">a.appendChild(<span class="keyword">node</span><span class="title">), 将node</span>节点添加到 a的末尾，并且<span class="keyword">node</span><span class="title">节点是a</span>节点子节点</span><br><span class="line">var a = document.getElementById(<span class="string">"par"</span>);</span><br><span class="line">var <span class="keyword">node</span> <span class="title">= document</span>.createElement(<span class="string">"div"</span>);</span><br><span class="line">a.appendChild(<span class="keyword">node</span><span class="title">); //a</span>节点末尾添加</span><br><span class="line"></span><br><span class="line">a.insertBefore(newnode, refnode), 将newnode节点插入到a节点的refnode之前。</span><br><span class="line">var a = document.getElementById(<span class="string">"par"</span>);</span><br><span class="line">var <span class="keyword">node</span> <span class="title">= document</span>.createElement(<span class="string">"div"</span>);</span><br><span class="line">a.insertBefore(<span class="keyword">node</span><span class="title">, a</span>.fistElementChild);// 插入节点</span><br><span class="line">a.insertBefore(<span class="keyword">node</span><span class="title">, null</span>); //类似于appenchild, 插入到末尾</span><br></pre></td></tr></table></figure>

      
    </div>
    
    
    

    

    
      <div>
        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div></div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>打赏</span>
  </button>
  <div id="QR" style="display: none;">

    
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="/images/wechatpay.jpg" alt="Key 微信支付">
        <p>微信支付</p>
      </div>
    

    
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="/images/alipay.jpg" alt="Key 支付宝">
        <p>支付宝</p>
      </div>
    

    

  </div>
</div>

      </div>
    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/JavaScript/" rel="tag"># JavaScript</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2017/09/12/string/" rel="next" title="JavaScript字符串">
                <i class="fa fa-chevron-left"></i> JavaScript字符串
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2017/09/12/time/" rel="prev" title="JavaScript定时器">
                JavaScript定时器 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="/images/avatar.jpg" alt="Key">
            
              <p class="site-author-name" itemprop="name">Key</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">107</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">12</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">28</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/keyarea" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i>GitHub</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="mailto:wxkayle@gmail.com" target="_blank" title="E-Mail">
                      
                        <i class="fa fa-fw fa-envelope"></i>E-Mail</a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#声明提升"><span class="nav-number">1.</span> <span class="nav-text">声明提升</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#变量声明提升"><span class="nav-number">1.1.</span> <span class="nav-text">变量声明提升</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#函数声明提升"><span class="nav-number">1.2.</span> <span class="nav-text">函数声明提升</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#经典面试题"><span class="nav-number">1.3.</span> <span class="nav-text">经典面试题</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#数值转换"><span class="nav-number">2.</span> <span class="nav-text">数值转换</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Number"><span class="nav-number">2.1.</span> <span class="nav-text">Number()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#parseInt"><span class="nav-number">2.2.</span> <span class="nav-text">parseInt()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#parseFloat"><span class="nav-number">2.3.</span> <span class="nav-text">parseFloat()</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#操作符以及控制语句"><span class="nav-number">3.</span> <span class="nav-text">操作符以及控制语句</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#break和continue"><span class="nav-number">3.1.</span> <span class="nav-text">break和continue</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#switch语句"><span class="nav-number">3.2.</span> <span class="nav-text">switch语句</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JAVAScript函数"><span class="nav-number">3.3.</span> <span class="nav-text">JAVAScript函数</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#arguments对象"><span class="nav-number">3.3.1.</span> <span class="nav-text">arguments对象</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#函数返回值"><span class="nav-number">3.3.2.</span> <span class="nav-text">函数返回值</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#布尔操作符"><span class="nav-number">3.4.</span> <span class="nav-text">布尔操作符</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#逻辑非"><span class="nav-number">3.4.1.</span> <span class="nav-text">逻辑非(!)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#逻辑与-amp-amp"><span class="nav-number">3.4.2.</span> <span class="nav-text">逻辑与(&amp;&amp;)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#逻辑或"><span class="nav-number">3.4.3.</span> <span class="nav-text">逻辑或(||)</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#关系操作符"><span class="nav-number">3.5.</span> <span class="nav-text">关系操作符</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#三目运算符"><span class="nav-number">3.6.</span> <span class="nav-text">三目运算符</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#复合操作符"><span class="nav-number">3.7.</span> <span class="nav-text">复合操作符</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#逗号操作符"><span class="nav-number">3.8.</span> <span class="nav-text">逗号操作符</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JAVAScript数组"><span class="nav-number">4.</span> <span class="nav-text">JAVAScript数组</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#创建数组"><span class="nav-number">4.1.</span> <span class="nav-text">创建数组</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数组的读写操作"><span class="nav-number">4.2.</span> <span class="nav-text">数组的读写操作:</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数组的长度"><span class="nav-number">4.3.</span> <span class="nav-text">数组的长度:</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数组的遍历"><span class="nav-number">4.4.</span> <span class="nav-text">数组的遍历</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#数组常用的方法"><span class="nav-number">5.</span> <span class="nav-text">数组常用的方法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#数组元素的添加和删除"><span class="nav-number">5.1.</span> <span class="nav-text">数组元素的添加和删除</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#join-方法"><span class="nav-number">5.2.</span> <span class="nav-text">join()方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#reverse-方法"><span class="nav-number">5.3.</span> <span class="nav-text">reverse()方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#sort-方法-对数组进行排序"><span class="nav-number">5.4.</span> <span class="nav-text">sort()方法,对数组进行排序</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#concat方法，连接数组并返回一个新数组"><span class="nav-number">5.5.</span> <span class="nav-text">concat方法，连接数组并返回一个新数组</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#slice-方法，对数组内容进行浅复制"><span class="nav-number">5.6.</span> <span class="nav-text">slice 方法，对数组内容进行浅复制</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#splice-对数组元素进行替换修改"><span class="nav-number">5.7.</span> <span class="nav-text">splice　对数组元素进行替换修改</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#toString-NaN"><span class="nav-number">5.8.</span> <span class="nav-text">toString()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ECMA5中数组新方法"><span class="nav-number">5.9.</span> <span class="nav-text">ECMA5中数组新方法</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#array-forEach"><span class="nav-number">5.9.1.</span> <span class="nav-text">array.forEach()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#array-map"><span class="nav-number">5.9.2.</span> <span class="nav-text">array.map()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#indexOf"><span class="nav-number">5.9.3.</span> <span class="nav-text">indexOf()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#filter"><span class="nav-number">5.9.4.</span> <span class="nav-text">filter()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#every-和some"><span class="nav-number">5.9.5.</span> <span class="nav-text">every()和some()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#reduce"><span class="nav-number">5.9.6.</span> <span class="nav-text">reduce()</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JAVAScript"><span class="nav-number">6.</span> <span class="nav-text">JAVAScript</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#事件流"><span class="nav-number">6.1.</span> <span class="nav-text">事件流</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#事件冒泡"><span class="nav-number">6.1.1.</span> <span class="nav-text">事件冒泡</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#事件捕获"><span class="nav-number">6.1.2.</span> <span class="nav-text">事件捕获</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#DOM事件流"><span class="nav-number">6.1.3.</span> <span class="nav-text">DOM事件流</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#事件处理程序"><span class="nav-number">6.2.</span> <span class="nav-text">事件处理程序</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#HTML事件处理程序"><span class="nav-number">6.2.1.</span> <span class="nav-text">HTML事件处理程序</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#DOM0级事件处理程序"><span class="nav-number">6.2.2.</span> <span class="nav-text">DOM0级事件处理程序</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#DOM2级事件处理程序"><span class="nav-number">6.2.3.</span> <span class="nav-text">DOM2级事件处理程序</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ie的事件处理程序"><span class="nav-number">6.2.4.</span> <span class="nav-text">ie的事件处理程序</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#跨浏览器的事件处理程序"><span class="nav-number">6.2.5.</span> <span class="nav-text">跨浏览器的事件处理程序</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#事件对象"><span class="nav-number">6.3.</span> <span class="nav-text">事件对象</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#DOM中的事件对象"><span class="nav-number">6.3.1.</span> <span class="nav-text">DOM中的事件对象</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ie中的事件对象"><span class="nav-number">6.3.2.</span> <span class="nav-text">ie中的事件对象</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#兼容浏览器的事件对象-基本"><span class="nav-number">6.3.3.</span> <span class="nav-text">兼容浏览器的事件对象(基本)</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DOM对象模型"><span class="nav-number">7.</span> <span class="nav-text">DOM对象模型</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#node节点"><span class="nav-number">7.1.</span> <span class="nav-text">node节点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#获得节点"><span class="nav-number">7.2.</span> <span class="nav-text">获得节点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#节点访问"><span class="nav-number">7.3.</span> <span class="nav-text">节点访问</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#父节点"><span class="nav-number">7.3.1.</span> <span class="nav-text">父节点</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#兄弟节点"><span class="nav-number">7.3.2.</span> <span class="nav-text">兄弟节点</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#第一个节点和最后一个节点"><span class="nav-number">7.3.3.</span> <span class="nav-text">第一个节点和最后一个节点</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#父元素的所有子节点"><span class="nav-number">7.3.4.</span> <span class="nav-text">父元素的所有子节点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#DOM节点操作"><span class="nav-number">7.4.</span> <span class="nav-text">DOM节点操作</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#创建节点"><span class="nav-number">7.4.1.</span> <span class="nav-text">创建节点</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#添加节点"><span class="nav-number">7.4.2.</span> <span class="nav-text">添加节点</span></a></li></ol></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; 2018 &mdash; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-snowflake-o"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Key</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
      <span class="post-meta-item-text">Site words total count&#58;</span>
    
    <span title="Site words total count">190.8k</span>
  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Mist</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  

  
  
    <script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
